<template>
  <div>
    <el-form
      ref="ruleForm"
      :model="video"
      :rules="rules"
      label-width="120px"
      enctype="multipart/form-data"
    >
      <el-form-item label="视频" prop="video">
        <!-- <input type="file" @change="getVideo($event)" /> -->
        <el-upload
          drag
          action="#"
          :auto-upload="false"
          :file-list="videoList"
          :on-change="handleVideo"
          accept=".mp4"
        >
          <div class="upload-video">
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div>拖拽到此处可以上传</div>
            <el-button type="primary">上传视频</el-button>
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item label="封面" prop="image">
        <!-- <input type="file" @change="getImage($event)" /> -->
        <el-upload
          action="#"
          list-type="picture-card"
          :file-list="imageList"
          :on-change="handleImage"
          :auto-upload="false"
          accept=".png , .jpg"
        >
          <div>
            <el-icon><Plus /></el-icon>
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item label="标题" prop="videoTitle">
        <el-input v-model="video.videoTitle" style="width: 300px" />
      </el-form-item>

      <el-form-item label="视频类型" prop="type">
        <el-select v-model="video.type" placeholder="选择视频类型">
          <el-option label="动漫" value="0" />
          <el-option label="娱乐" value="1" />
          <el-option label="科技" value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="介绍" prop="info">
        <el-input v-model="video.info" style="width: 300px" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import UserApi from '@/api/core/User'
import { ElLoading } from 'element-plus'
import Cookie from 'js-cookie'
export default {
  name: 'PublishVideo',
  data() {
    return {
      video: {},
      imageList: [],
      videoList: [],
      flag: false,
      rules: {
        videoTitle: [
          { required: true, message: '请输入标题', trigger: 'blur' },
        ],
        type: [
          {
            required: true,
            message: '请选择视频类型',
            trigger: 'change',
          },
        ],
      },
    }
  },
  methods: {
    handleVideo(file, videoList) {
      if (videoList.length > 0) {
        const type = ['video/mp4']
        if (videoList.length > 0) {
          if (type.indexOf(file.raw.type) === -1) {
            console.log(file.raw.type)
            this.videoList.pop()
            this.$message.error('上传视频只能是mp4格式')
            return false
          }
          /* 得到的结果基本单位为：GB */
          const size = file.size / 1024 / 1024 / 1024
          if (size > 2) {
            this.videoList.pop()
            this.$message.error('上传的视频要小于 2GB')
            return false
          }

          this.videoList = [videoList[videoList.length - 1]]
        }
      }
    },

    handleImage(file, imageList) {
      if (imageList.length > 0) {
        const type = ['image/png', 'image/jpeg']
        if (type.indexOf(file.raw.type) === -1) {
          this.imageList.pop()
          this.$message.error('上传图片只能是jpg/png格式')
          return false
        }

        /* 得到的结果基本单位为：MB */
        const size = file.size / 1024 / 1024
        if (size > 2) {
          this.imageList.pop()
          this.$message.error('上传的图片大小要小于 2MB')
          return false
        }

        this.imageList = [imageList[imageList.length - 1]]
      }
    },

    submit() {
      if (this.imageList.length === 0 || this.videoList.length === 0) {
        this.$message.error('请上传文件')
        return
      }

      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let formData = new FormData()
          formData.append('video', this.videoList[0].raw)
          formData.append('image', this.imageList[0].raw)
          formData.append('videoTitle', this.video.videoTitle)
          formData.append('info', this.video.info)
          formData.append('type', this.video.type)
          formData.append('userId', Cookie.get("userId"))
          if (this.flag) {
            return
          }

          this.flag = true
          const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
          })
          UserApi.publishVideo(formData)
            .then((response) => {
              loading.close()
              this.flag = false
              this.$message.success(response.message)

              this.$refs.ruleForm.resetFields()
              this.videoList = []
              this.imageList = []
            })
            .catch((error) => {
              loading.close()
              console.log(error)
            })
        } else {
          this.$message.error('表单没有按规则填写')
        }
      })
    },
  },
}
</script>

<style>
.upload-video {
  width: 400px;
}
</style>
